<template>
  <md-nav-bar title="充值记录" backgroundColor="#ffffff" />
  <view class="record-container">
    <!-- 顶部卡片 -->
    <view class="card">
      <view class="card-info">
        <view class="card-title">剩余A豆</view>
        <view class="card-adou">
          <image
            class="adou-icon"
            src="https://cdn.xmxiaomai.com/isong_static/my/Group%203.png"
            mode="widthFix"></image>
          <text class="adou-num">{{ data.adou }}</text>
        </view>
      </view>
      <button class="recharge-btn" @click="onRecharge">充值</button>
    </view>

    <!-- 购买记录列表 -->
    <view class="list">
      <md-page-list @change="pageChange" :api="api.Pay.record" :params="{ memberId: data.memberId }">
        <view v-for="(item, idx) in data.list" :key="idx" class="list-item">
          <view class="item-left">
            <image
              class="icon-bg"
              src="https://cdn.xmxiaomai.com/isong_static/my/Combined%20Shape.png"
              mode="widthFix"></image>
          </view>
          <view class="item-main">
            <view class="item-date">{{ item.time }}</view>
            <view class="item-title">{{ item.description }}</view>
          </view>
          <view class="item-right">
            <view class="item-amount">￥{{ formatUnitCentToYuan(item.price, 2) }}</view>
          </view>
        </view>
      </md-page-list>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
// 接口
import api from '@/api';
import type { Pay } from '@/api/data';
import { onLoad } from '@dcloudio/uni-app';
import { formatUnitCentToYuan } from '@/utils/util';

const data = reactive({
  memberId: -1,
  list: [] as Pay.Record.ListVo[],
  adou: 0,
});

const pageChange = (list: any[]) => {
  console.log('pageChange::', list);
  data.list = list;
};

function onRecharge() {
  uni.navigateTo({
    url: `/pages/sub/my/rechargePage`,
  });
}

/**
 * 接口相关
 */
// 获取剩余a豆数量
const fetchGetPoint = async () => {
  try {
    const res = await api.User.getPoint();
    data.adou = res.data;
  } catch (error) {}
};

onLoad((options: any) => {
  data.memberId = uni.getStorageSync('auth')?.userId;
  fetchGetPoint();
});
</script>

<style lang="scss" scoped>
.record-container {
  min-height: 100vh;
  background: #fafcfa;
  padding-bottom: 32rpx;
}
.card {
  margin: 0;
  background: linear-gradient(135deg, #2ca88a 0%, #0b5e4a 100%);
  padding: 52rpx 53rpx 48rpx 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.card-info {
  display: flex;
  flex-direction: column;
  color: #fff;
}
.card-title {
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 8rpx;
}
.card-adou {
  display: flex;
  align-items: center;
}
.adou-icon {
  width: 27rpx;
  height: 33.75rpx;
  margin-right: 9rpx;
}
.adou-num {
  font-size: 48rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
}
.recharge-btn {
  position: absolute;
  right: 36rpx;
  top: 50%;
  transform: translateY(-50%);
  background: #ffe7b2;
  color: #b88a2a;
  font-size: 30rpx;
  border-radius: 40rpx;
  padding: 0 40rpx;
  height: 64rpx;
  line-height: 64rpx;
  font-weight: 500;
  border: none;
  box-shadow: none;
}
.list {
  margin: 0 0 0 0;
  margin-top: 24rpx;
}
.list-item {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 0;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 28rpx 24rpx 18rpx 24rpx;
}
.item-left {
  margin-right: 24rpx;
  margin-top: 8rpx;
}
.icon-bg {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon {
  font-size: 32rpx;
}
.item-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item-date {
  font-size: 24rpx;
  color: #bbb;
  margin-bottom: 4rpx;
}
.item-title {
  font-size: 30rpx;
  color: #222;
  font-weight: 400;
}
.item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 120rpx;
  margin-left: 12rpx;
  justify-content: center;
}
.item-amount {
  font-size: 32rpx;
  color: #01604a;
  font-weight: 600;
  min-width: 80rpx;
  text-align: right;
  .item-unit {
    font-size: 20rpx;
  }
}
</style>
